import { ProductDataType, getProductDetails, getProducts } from "../helper";

export default async function Page ({params}:{
  params: {
    id: string;
  }
}) {
  const data: ProductDataType = await getProductDetails(params.id)

  return (
    !data ? null :
    <div style={{maxWidth: '80vh', margin: '1rem auto'}}>
      <img src={data.thumbnail} alt="thumbnail" />
      <h1 className="text-blue-600 text-2xl">{data.title}</h1>
      <p>{data.description}</p>
    </div>
  )
}

/**
 * !!! replace the getStaticPaths function in pages router !!!
 */
// export async function generateStaticParams() {
//   const { products } = (await getProducts() || {})
 
//   return products?.filter(
//     (data:ProductDataType) => (data.id < 6)
//   ).map(
//     (data:ProductDataType) => ({
//       id: data.id.toString(),
//     })
//   )
// }
